<template>
   <div class="basic-box">
     <el-row>
         <el-breadcrumb separator="/">
             <el-breadcrumb-item>
               <router-link to="/index"> 主页</router-link>
             </el-breadcrumb-item>
             <el-breadcrumb-item>档案管理</el-breadcrumb-item>
           <el-breadcrumb-item>基本信息</el-breadcrumb-item>
         </el-breadcrumb>
     </el-row>
     <el-row>搜索区</el-row>
     <el-row>
           <el-table :data="list">
               <el-table-column prop="name" label="员工姓名"></el-table-column>
             <el-table-column prop="dept" label="员工部门"></el-table-column>
           </el-table>

     </el-row>

     <el-button-group>
         <el-button @click="btnQueryClick">查询一个员工</el-button>
       <el-button @click="btnQueryClick">删除一个员工</el-button>
       <el-button @click="btnUpdateClick">修改一个员工</el-button>

     </el-button-group>
   </div>
</template>

<script>
export default {
  name: "Basic",
  data(){
    return {
       list:[],
       empId:1,
       employee:{
         name:'员工1',
         gender:'male',
         dept:'hr'
       }
    }
  },mounted() {

      this.axios({
         url:'http://localhost:8088/doc/list',
         method:'get',
         dataType:'json'
      }).then((res)=>{
           this.list = res.data.data;
      })

  },methods:{
      btnQueryClick(){

        this.axios({
          url:'http://localhost:8088/doc2/query/'+this.empId,
          method:'get',
          dataType:'json'
        }).then((res)=>{
            console.log(res.data);
        })
      },btnDelClick(){

      this.axios({
        url:'http://localhost:8088/doc2/del/'+this.empId,
        method:'delete',
        dataType:'json'
      }).then((res)=>{
        console.log(res.data);
      })
    },btnUpdateClick(){

      this.axios({
        url:'http://localhost:8088/doc2/update',
        method:'put',
        dataType:'json',
        params:this.employee
      }).then((res)=>{
        console.log(res.data);
      })
    }
  }
}
</script>

<style scoped>

.basic-box{
     padding: 10px;
}

</style>